<template>
  <div id="app" :class="appClasses">
    <MainLayout v-if="!isMiniMode">
      <router-view />
    </MainLayout>
    <MiniModeView v-else />
    <ConfirmCloseDialog
      :is-visible="showConfirmCloseDialog"
      @confirm="handleConfirmClose"
      @cancel="handleCancelClose"
    />
    <ConfirmCloseDialog
      :isVisible="showCustomCloseDialog"
      @chose-action="handleCustomCloseChoice"
    />
    <div v-if="showSettings" class="settings-panel">
      <div class="settings-section">
        <div class="settings-header">数据存储</div>
        <div class="settings-option">
          <button class="migrate-button" @click="migrateToSqlite" :disabled="migrationInProgress">
            {{ migrationInProgress ? '正在迁移...' : '将数据迁移到SQLite' }}
          </button>
          <div class="settings-description">
            将现有数据从electron-store迁移到SQLite数据库以提高性能和可靠性。
          </div>
          <div v-if="migrationSuccess" class="migration-success">
            迁移成功！您的数据现在已保存在SQLite数据库中。
          </div>
          <div v-if="migrationError" class="migration-error">
            迁移失败：{{ migrationErrorMessage }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// const { ipcRenderer } = require('electron'); // REVERTED (Removed)
const ipcRenderer = window.electronAPI; // Using contextBridge exposed API
import MainLayout from '@/layouts/MainLayout.vue';
import ConfirmCloseDialog from '@/components/ConfirmCloseDialog.vue';
import MiniModeView from '@/views/MiniModeView.vue';
import { mapState, mapActions, mapGetters } from 'vuex';

export default {
  name: 'App',
  components: {
    MainLayout,
    ConfirmCloseDialog,
    MiniModeView,
  },
  data() {
    return {
      // showConfirmCloseDialog: false, // REMOVED - Managed by Vuex state
      isMiniMode: false, // Default to false, and will remain so on startup
      isDarkTheme: false, // 默认使用浅色主题
      showCustomCloseDialog: false,
      showSettings: false,
      migrationInProgress: false,
      migrationSuccess: false,
      migrationError: false,
      migrationErrorMessage: '',
    };
  },
  computed: {
    ...mapState(['showConfirmCloseDialog', 'settings']),
    appClasses() {
      // Theme classes are applied to <html> by the applyTheme action in Vuex store
      return []; 
    },
    currentView() {
      return this.isMiniMode ? 'MiniModeView' : 'MainLayout';
    },
  },
  watch: {
    // Watcher for theme changes in settings, triggers applyTheme action
    'settings.theme'(newTheme, oldTheme) {
      if (newTheme !== oldTheme) {
        console.log(`[App.vue] Theme changed in settings from ${oldTheme} to ${newTheme}. Applying via action.`);
        this.applyTheme(newTheme);
      }
    },
    isMiniMode(newVal, oldVal) {
      if (newVal !== oldVal) {
        console.log(`[App.vue] Watcher: isMiniMode changed from ${oldVal} to ${newVal}`);
        if (newVal) {
          console.log('[App.vue] Watcher: Switching to MiniModeView.');
        } else {
          console.log('[App.vue] Watcher: Switching to MainLayout.');
        }
      }
    },
  },
  methods: {
    // Map necessary actions from Vuex store
    ...mapActions([
      'loadInitialDataFromDisk',
      'applyTheme',
      'closeConfirmCloseDialog',
      'handleCustomCloseDecision',
      'systemThemeChanged',
      'openConfirmCloseDialog',
      'migrateToSqlite'
    ]),
    // Handles the response from the ConfirmCloseDialog component
    handleCloseDialogResponse(response) {
      this.handleCustomCloseDecision(response); // Vuex action to process the decision
      this.closeConfirmCloseDialog(); // Vuex action to hide the dialog
    },
    handleConfirmClose() {
      console.log("[App.vue] ConfirmCloseDialog confirmed.");
      this.showConfirmCloseDialog = false;
      ipcRenderer.send('close-confirmed');
    },
    handleCancelClose() {
      console.log("[App.vue] ConfirmCloseDialog cancelled.");
      this.showConfirmCloseDialog = false;
      ipcRenderer.send('close-cancelled');
    },
    handleCustomCloseChoice(choice, dontAskAgainValue) {
      console.log(`[App.vue] handleCustomCloseChoice received: choice=${choice} (type: ${typeof choice}), dontAskAgainValue=${dontAskAgainValue} (type: ${typeof dontAskAgainValue})`);
      this.showCustomCloseDialog = false;
      if (ipcRenderer) {
        // Explicitly check the type before sending
        const finalDontAskAgain = typeof dontAskAgainValue === 'boolean' ? dontAskAgainValue : false;
        if (typeof dontAskAgainValue !== 'boolean') {
            console.warn(`[App.vue] dontAskAgainValue was not a boolean (was ${typeof dontAskAgainValue}). Defaulting to false for IPC.`);
        }
        console.log(`[App.vue] Sending 'custom-close-response' with choice: ${choice}, finalDontAskAgain: ${finalDontAskAgain}`);
        ipcRenderer.send('custom-close-response', choice, finalDontAskAgain);
      } else {
        console.error("[App.vue] ipcRenderer not available to send custom-close-response.");
      }
    },
    async migrateToSqlite() {
      if (this.migrationInProgress) return;
      
      this.migrationInProgress = true;
      this.migrationSuccess = false;
      this.migrationError = false;
      this.migrationErrorMessage = '';
      
      try {
        // 调用Vuex action进行数据迁移
        const result = await this.$store.dispatch('migrateToSqlite');
        
        if (result) {
          this.migrationSuccess = true;
          console.log('数据成功迁移到SQLite');
          
          // 显示成功消息3秒后自动隐藏
          setTimeout(() => {
            this.migrationSuccess = false;
          }, 3000);
        } else {
          this.migrationError = true;
          this.migrationErrorMessage = '迁移过程中出现错误';
        }
      } catch (error) {
        console.error('迁移过程出错:', error);
        this.migrationError = true;
        this.migrationErrorMessage = error.message || '未知错误';
      } finally {
        this.migrationInProgress = false;
      }
    },
  },
  async created() {
    console.log('[App.vue] App created. Loading initial data...');
    try {
      // Load all application data, which also handles initial theme application
      await this.loadInitialDataFromDisk(); 
      console.log('[App.vue] Initial data loaded successfully.');
    } catch (error) {
      console.error('[App.vue] Error during created hook (loading data or applying theme):', error);
    }

    // IPC listener for request from main process to show custom close dialog
    window.electronAPI.on('request-custom-close', () => {
      console.log('[App.vue] Received request-custom-close from main.');
      this.openConfirmCloseDialog(); // Call mapped Vuex action to show the dialog
    });

    // IPC listener for system theme changes detected by the main process
    window.electronAPI.on('system-theme-changed', (newSystemTheme) => {
      console.log(`[App.vue] Received system-theme-changed: ${newSystemTheme}. Dispatching systemThemeChanged action.`);
      this.systemThemeChanged(newSystemTheme); // Call mapped Vuex action to handle system theme update
    });

    ipcRenderer.on('request-close-confirmation', () => {
      console.log("[App.vue] Received 'request-close-confirmation', showing dialog.");
      this.showConfirmCloseDialog = true;
    });

    ipcRenderer.on('toggle-mini-mode', (statusFromMain) => {
      console.log(`[App.vue] Received 'toggle-mini-mode' IPC, new status from main: ${statusFromMain}, Type: ${typeof statusFromMain}`);
      let newIsMiniModeBoolean = false; // Default to a safe value
      if (typeof statusFromMain === 'boolean') {
        newIsMiniModeBoolean = statusFromMain;
      } else {
        console.warn(`[App.vue] toggle-mini-mode: statusFromMain was not a boolean (${typeof statusFromMain}). Defaulting to false.`);
        // newIsMiniModeBoolean remains false
      }
      
      // Update local component data directly. This is the source of truth for the view conditional.
      this.isMiniMode = newIsMiniModeBoolean; 
      
      // Dispatch action to update Vuex store, but using the 'internal' version 
      // that doesn't re-send IPC to main, and handles DOM theme updates correctly.
      this.$store.dispatch('updateSettingsInternal', { miniMode: newIsMiniModeBoolean });
      console.log(`[App.vue] Dispatched 'updateSettingsInternal' to Vuex with miniMode: ${newIsMiniModeBoolean}`);
    });

    // Listen for theme toggle from main process (e.g., menu)
    ipcRenderer.on('toggle-theme', () => {
      // Theme preference IS persisted
      this.$store.dispatch('updateSetting', { key: 'theme', value: 'system' }); 
      // The actual application of the theme (adding/removing class from html)
      // is now handled by the 'applyTheme' action, which is dispatched by 'updateSetting' in the store.
      // So, direct DOM manipulation here is removed.
    });

    if (ipcRenderer) {
      ipcRenderer.on('theme-changed-externally', (newTheme) => {
        console.log(`[App.vue] Received 'theme-changed-externally', new theme: ${newTheme}`);
        // Dispatch updateSettings which will in turn call applyTheme in the store
        this.$store.dispatch('updateSettings', { theme: newTheme });
        // Update local isDarkTheme as well, after store action might have changed documentElement
        // It is better to rely on store state or direct check of documentElement class for truth
        const vuexTheme = this.$store.state.settings.theme;
        if (vuexTheme === 'system') {
            this.isDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
        } else {
            this.isDarkTheme = vuexTheme === 'dark';
        }
        console.log(`[App.vue] Synced local isDarkTheme to: ${this.isDarkTheme} after 'theme-changed-externally'.`);
      });

      ipcRenderer.on('toggle-mini-mode', (statusFromMain) => { 
        console.log(`[App.vue] Received 'toggle-mini-mode' IPC, new status from main: ${statusFromMain}, Type: ${typeof statusFromMain}`);
        let newIsMiniModeBoolean = false; 
        if (typeof statusFromMain === 'boolean') {
          newIsMiniModeBoolean = statusFromMain;
        } else {
          console.warn(`[App.vue] toggle-mini-mode: statusFromMain was not a boolean (${typeof statusFromMain}). Defaulting to false.`);
        }
        this.isMiniMode = newIsMiniModeBoolean; 
        this.$store.dispatch('updateSettingsInternal', { miniMode: newIsMiniModeBoolean });
        console.log(`[App.vue] Dispatched 'updateSettingsInternal' to Vuex with miniMode: ${newIsMiniModeBoolean}. Local isMiniMode is now ${this.isMiniMode}`);
      });

      // IPC Listener to show the custom close dialog
      ipcRenderer.on('request-custom-close-confirmation', () => {
        console.log(`[App.vue] Received 'request-custom-close-confirmation', showing dialog.`);
        this.showCustomCloseDialog = true;
      });

    } else {
      console.warn('[App.vue] ipcRenderer is not available in created hook.');
    }

    // 监听来自主进程的消息，例如主题更改
    if (window.electronAPI) {
      window.electronAPI.on('native-theme-updated', (event, theme) => {
        console.log('[App.vue] Received native-theme-updated from main process with theme:', theme);
        // 这里可以根据需要处理主题更改
      });
      
      // 监听从主进程发来的应用主题事件
      window.electronAPI.onApplyTheme((theme) => {
        console.log('[App.vue] 收到主进程发送的主题设置:', theme);
        // 确保主题设置有效
        if (theme) {
          // 使用Vuex action应用主题
          this.applyTheme(theme);
          // 同时更新设置，保存到配置文件
          this.$store.dispatch('updateSettings', { theme });
          console.log('[App.vue] 已应用主进程发送的主题设置并更新配置');
        } else {
          console.log('[App.vue] 收到的主题设置无效，使用当前主题');
        }
      });
      
      // 监听关闭确认请求
      window.electronAPI.on('request-custom-close-confirmation', () => {
        console.log('[App.vue] Received request-custom-close-confirmation from main process');
        this.showCloseConfirmDialog = true;
      });
      
      // 监听导航到提醒页面的请求
      window.electronAPI.on('navigate-to-reminder', () => {
        console.log('[App.vue] Received navigate-to-reminder from main process');
        this.$router.push('/reminder').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            console.error('[App.vue] 导航到提醒页面时出错:', err);
          }
        });
      });
    }
  },
  mounted() {
     // Log current theme after component is mounted and initial data (including theme) should be set
     console.log('[App.vue] App mounted. Current theme from store state after created hook:', this.settings.theme);
  },
  beforeUnmount() { 
    if (ipcRenderer) {
      ipcRenderer.removeAllListeners('theme-changed-externally');
      ipcRenderer.removeAllListeners('toggle-mini-mode');
      ipcRenderer.removeAllListeners('request-custom-close-confirmation');
      console.log('[App.vue] Removed IPC listeners for theme-changed-externally, toggle-mini-mode, and request-custom-close-confirmation.');
    }
  }
};
</script>

<style lang="scss">
/* Global Styles */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden; 
  font-family: var(--font-family-base); 
}

#app {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: hidden; 
}

:root {
  /* Base Layout & Sizing (Theme Agnostic) */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-icons: "Segoe MDL2 Assets";
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.5;
  --line-height-tight: 1.25;
  --line-height-loose: 1.75;
  --font-size-xxs: 10px;
  --font-size-xs: 12px;
  --font-size-sm: 13px; 
  --font-size-base: 14px; 
  --font-size-md: 16px; 
  --font-size-lg: 18px; 
  --font-size-xl: 22px; 
  --font-size-xxl: 28px;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-base: 12px; 
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --border-radius-sm: 3px;
  --border-radius-base: 5px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --border-radius-circle: 50%;
  --border-width: 1px;
  --border-style: solid;
  --transition-duration-short: 0.15s;
  --transition-duration-base: 0.25s;
  --transition-duration-long: 0.4s;
  --transition-timing-function: ease-in-out;

  /* Theme-agnostic focus variables (with defaults) */
  --focus-outline-color: #007BFF; /* Default focus outline color */
  --focus-shadow-color-rgb: 0, 123, 255; /* Default focus shadow RGB */
}

/* Global focus visible style for better accessibility */
*:focus-visible {
  outline: 2px solid var(--focus-outline-color); 
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--focus-shadow-color-rgb), 0.2); 
}

/* Remove default outline for elements that will have custom focus styles */
input:focus, button:focus, select:focus, textarea:focus {
  outline: none;
}

html.dark-theme {
  /* --- Semantic Theme Variables (Dark) --- */
  --theme-bg-app-wrapper: var(--d-bg-primary);
  --theme-bg-sidebar: var(--d-bg-primary); 
  --theme-bg-titlebar: var(--d-bg-primary);
  --theme-bg-content-area: var(--d-bg-primary);
  --theme-bg-card: var(--d-card-bg);
  --theme-bg-tertiary: var(--d-bg-tertiary);
  --theme-bg-input: var(--d-input-bg);
  --theme-bg-button-primary: var(--d-button-primary-bg);
  --theme-bg-button-secondary: var(--d-button-secondary-bg);
  --theme-text-primary: var(--d-text-primary);
  --theme-text-secondary: var(--d-text-secondary);
  --theme-text-muted: var(--d-text-muted);
  --theme-text-on-accent: var(--d-text-on-accent);
  --theme-border-primary: var(--d-border-primary-color);
  --theme-border-secondary: var(--d-border-secondary-color);
  --theme-border-input: var(--d-input-border);
  --theme-accent-primary: var(--d-accent-solid-base);
  --theme-accent-primary-hover: var(--d-accent-solid-highlight);
  --theme-accent-primary-rgb: var(--d-accent-primary-rgb);
  --theme-accent-secondary: orange; /* 日历中待办事项标记点的颜色 */
  --theme-accent-gradient: var(--d-accent-gradient); 
  --theme-accent-highlight: var(--d-accent-solid-highlight); 
  --theme-accent-warning: #FF8C00;
  --theme-focus-outline-color: var(--d-accent-solid-base); 
  --theme-focus-shadow-color-rgb: var(--d-accent-primary-rgb); 
  --theme-scrollbar-track-bg: var(--d-scrollbar-track-bg);
  --theme-scrollbar-thumb-bg: var(--d-scrollbar-thumb-bg);
  --theme-scrollbar-thumb-hover-bg: var(--d-scrollbar-thumb-hover-bg);
  --theme-calendar-selected-day-bg: var(--d-calendar-selected-day-bg);
  --theme-calendar-selected-day-text: var(--d-calendar-selected-day-text);

  /* Dark Theme Color Palette (Restored) */
  margin: 0;
  padding: 0;
  background-color: var(--d-bg-primary); /* Actual HTML bg */
  color: var(--d-text-primary); /* Actual HTML text color */

  --d-bg-primary: #10121A; /* Deep Starry Sky Blue-Black */
  --d-bg-secondary: #1A1D2A; /* Slightly Lighter Blue-Black for secondary surfaces */
  --d-bg-tertiary: #24283B; /* Lighter still for cards, popovers, etc. */
  --d-bg-hover: #2E324C; /* Hover state for interactive elements */
  --d-bg-active: #3A3F5D; /* Active/pressed state */
  --d-card-bg: #1F2233; /* Specific card background, can be same as tertiary or slightly different */

  --d-text-primary: #E0E7FF; /* Primary text - Soft, off-white with a hint of blue */
  --d-text-secondary: #A0A8C0; /* Secondary text - Lighter gray-blue */
  --d-text-muted: #707890;   /* Muted text - Medium gray-blue for hints, captions */
  --d-text-disabled: #4F5870; /* Disabled text - Darker gray-blue */
  --d-text-on-accent: #FFFFFF; /* Text on accent colors - typically white or very light */
  --d-text-link: var(--d-accent-solid-base); /* Link text color */
  --d-text-link-hover: var(--d-accent-solid-highlight); /* Link hover text color */

  --d-accent-solid-base: #007BFF; /* Primary Accent - Cyber Blue (Solid) */
  --d-accent-solid-highlight: #3395FF; /* Highlight for Cyber Blue */
  --d-accent-secondary-base: #9C27B0; /* Secondary Accent - Neon Purple (Solid) */
  --d-accent-secondary-highlight: #BA68C8; /* Highlight for Neon Purple */
  --d-accent-primary-rgb: 0, 123, 255; /* Cyber Blue RGB for box-shadows etc. */
  --d-accent-secondary-rgb: 156, 39, 176; /* Neon Purple RGB */
  --d-accent-gradient: linear-gradient(135deg, var(--d-accent-solid-base) 0%, var(--d-accent-secondary-base) 100%);
  --d-accent-gradient-hover: linear-gradient(135deg, var(--d-accent-solid-highlight) 0%, var(--d-accent-secondary-highlight) 100%);

  --d-border-primary-color: #2A2E45; /* Primary border color */
  --d-border-secondary-color: #3A3F5D; /* Secondary border for less emphasis */
  --d-border-tertiary-color: #4F5870;  /* Tertiary border, even less emphasis */
  --d-border-accent-color: var(--d-accent-solid-base); /* Border for accented elements */

  --d-input-bg: var(--d-bg-secondary);
  --d-input-text: var(--d-text-primary);
  --d-input-placeholder: var(--d-text-muted);
  --d-input-border: var(--d-border-primary-color);
  --d-input-focus-border: var(--d-accent-solid-base);
  --d-input-focus-bg: var(--d-bg-primary);
  --d-input-focus-shadow-color: rgba(var(--d-accent-primary-rgb), 0.3);
  --d-input-disabled-bg: #202330;
  --d-input-disabled-border: #2A2E45;
  --d-input-disabled-text: var(--d-text-disabled);

  --d-button-primary-bg: var(--d-accent-solid-base);
  --d-button-primary-hover-bg: var(--d-accent-solid-highlight);
  --d-button-primary-active-bg: color-mix(in srgb, var(--d-accent-solid-base) 85%, black);
  --d-button-primary-text: var(--d-text-on-accent);
  --d-button-primary-disabled-bg: #2A3B57; /* Darker, desaturated blue */
  --d-button-primary-disabled-text: #606A80;

  --d-button-secondary-bg: var(--d-bg-tertiary);
  --d-button-secondary-hover-bg: var(--d-bg-hover);
  --d-button-secondary-active-bg: var(--d-bg-active);
  --d-button-secondary-text: var(--d-text-secondary);
  --d-button-secondary-border: var(--d-border-secondary-color);
  --d-button-secondary-hover-border: var(--d-border-primary-color);
  --d-button-secondary-disabled-bg: #24283B; /* Same as tertiary, but with disabled text */
  --d-button-secondary-disabled-text: var(--d-text-disabled);
  --d-button-secondary-disabled-border: #2A2E45;

  --d-checkbox-radio-bg: var(--d-input-bg);
  --d-checkbox-radio-border-color: var(--d-input-border);
  --d-checkbox-radio-hover-border-color: var(--d-accent-solid-base);
  --d-checkbox-radio-checked-bg: var(--d-accent-solid-base);
  --d-checkbox-radio-checked-hover-bg: var(--d-accent-solid-highlight);
  --d-checkbox-radio-checkmark-color: var(--d-text-on-accent);
  --d-checkbox-radio-disabled-color: #404860;

  --d-shadow-color-rgb: 0, 0, 0; /* Pure black for subtle shadows against dark */
  --d-shadow-opacity-subtle: 0.2;  /* More pronounced on dark backgrounds */
  --d-shadow-opacity-medium: 0.35;
  --d-shadow-opacity-strong: 0.5;
  --d-shadow-card: 0 4px 12px 0 rgba(var(--d-shadow-color-rgb), var(--d-shadow-opacity-strong));

  --d-text-secondary-rgb: 160, 168, 192; /* --d-text-secondary as RGB */
  --d-scrollbar-thumb-bg: rgba(var(--d-text-secondary-rgb), 0.3);
  --d-scrollbar-thumb-hover-bg: rgba(var(--d-text-secondary-rgb), 0.5);
  --d-scrollbar-track-bg: color-mix(in srgb, var(--d-bg-primary) 70%, transparent);

  /* Other UI Elements (Colors Only) */
  --d-divider-color: var(--d-border-primary-color);
  --d-icon-color: var(--d-text-secondary);
  --d-icon-hover-color: var(--d-text-primary);
  --d-tooltip-bg: #10121A; /* Base background for tooltip */
  --d-tooltip-text: var(--d-text-primary);
  --d-calendar-selected-day-bg: #0059B3; /* New - Darker blue for selected day */
  --d-calendar-selected-day-text: #FFFFFF; /* New */

  /* Dark theme specific focus colors */
  --focus-outline-color: var(--d-accent-solid-base);
  --focus-shadow-color-rgb: var(--d-accent-primary-rgb);

  /* Ensure dark theme scrollbar styles are specific */
  & ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  & ::-webkit-scrollbar-track {
    background: var(--d-scrollbar-track-bg);
    border-radius: 5px;
  }
  & ::-webkit-scrollbar-thumb {
    background-color: var(--d-scrollbar-thumb-bg);
    border-radius: 5px;
    border: 2px solid var(--d-scrollbar-track-bg); /* Creates padding around thumb */
  }
  & ::-webkit-scrollbar-thumb:hover {
    background-color: var(--d-scrollbar-thumb-hover-bg);
  }
  & ::-webkit-scrollbar-corner {
    background: transparent;
  }
}

html.light-theme {
  /* === Light Theme: V3.A (Bright Orange Base + Deep Blue Text + Light Blue Borders + Bright Blue Accent) === */
  /* User Request: Change all indicated (red-boxed) areas to #FFF5E6 */

  /* --- Accent Colors (Bright Blue) --- */
  --l-accent-primary: #0A7AFF;
  --l-accent-primary-rgb: 10, 122, 255;
  --l-accent-secondary: #5FB0FF; 
  --l-accent-gradient: linear-gradient(135deg, #0A7AFF 0%, #3DA9FC 70%, #6BCFFF 100%);
  --l-accent-highlight: #3DA9FC; 
  --l-text-on-accent: #FFFFFF;

  /* --- Background Colors (Warm Orange Tones - ADJUSTED) --- */
  --l-bg-app-wrapper: #FFF5E6; /* Outermost wrapper background */
  --l-bg-primary: #FFF5E6;      /* Main content areas, and now also for secondary/titlebar areas */
  --l-bg-secondary: #FFF0E0;   /* MODIFIED: Was #FFF5E6. General secondary surfaces. Very Pale Apricot */
  --l-bg-tertiary: #FFD5AA;    /* Popovers, menus - Retains a slightly deeper Peach/Orange for distinction */
  --l-bg-content-area: #FFF8F0; /* Specific background for main content view area (e.g. calendar grid) - Off-white with orange tint, slightly different from primary */
  --l-bg-titlebar: var(--l-bg-secondary); /* MODIFIED: Will now also be #FFF5E6 */
  --l-bg-card: #FFFFFF;         /* Cards, list items - Pure White for contrast */
  --l-bg-input: #FFFFFF;         /* Input field background - Pure White */
  --l-bg-button-secondary: #FFE8D6; /* Secondary button background - Light Apricot */
  --l-bg-hover: #FFF0E0;          /* General hover state on primary/card - Very Pale Apricot */
  --l-bg-active: #FFE8D1;         /* General active state on primary/card - Slightly Deeper Pale Apricot */

  /* --- Text Colors (Deep Blue Tones) --- */
  --l-text-primary: #003366;      
  --l-text-secondary: #004C99;    
  --l-text-muted: #6699CC;        
  --l-text-disabled: #B0C4DE;     
  --l-text-input: var(--l-text-primary); 

  /* --- Border Colors (Light Blue Tones) --- */
  --l-border-primary: #B0E0E6;   
  --l-border-secondary: #E0FFFF; 
  --l-border-input: #ADD8E6;     
  --l-border-divider: var(--l-border-secondary); 

  /* --- Shadow Colors (Subtle Black) --- */
  --l-shadow-color-rgb: 0, 0, 0; 
  --l-shadow-opacity-light: 0.04;  
  --l-shadow-opacity-medium: 0.06;
  --l-shadow-opacity-strong: 0.10;
  --l-shadow-popover: 0 4px 12px rgba(var(--l-shadow-color-rgb), var(--l-shadow-opacity-medium));

  /* --- Specific Component Colors (No Red/Brown) --- */
  --l-scrollbar-thumb-bg: #B0C4DE; 
  --l-scrollbar-thumb-hover-bg: #A0B4CE; 
  --l-scrollbar-track-bg: var(--l-bg-secondary); /* Will now be #FFF5E6 */
  
  --l-button-danger-bg: #4B0082; 
  --l-button-danger-bg-hover: #3A006A; 
  --l-button-archive-bg: #20B2AA; 
  --l-button-archive-bg-hover: #1A8F88; 

  /* --- Link Colors --- */
  --l-link-color: var(--l-accent-primary);
  --l-link-hover-color: var(--l-accent-highlight);

  /* --- Apply Semantic Variables for Light Theme (Mappings remain the same) --- */
  --theme-accent-primary: var(--l-accent-primary);
  --theme-accent-primary-rgb: var(--l-accent-primary-rgb);
  --theme-accent-secondary: var(--l-accent-secondary);
  --theme-accent-gradient: var(--l-accent-gradient);
  --theme-accent-highlight: var(--l-accent-highlight);
  --theme-text-on-accent: var(--l-text-on-accent);

  --theme-bg-app-wrapper: var(--l-bg-app-wrapper);
  --theme-bg-primary: var(--l-bg-primary);
  --theme-bg-secondary: var(--l-bg-secondary);
  --theme-bg-tertiary: var(--l-bg-tertiary);
  --theme-bg-content-area: var(--l-bg-content-area);
  --theme-bg-titlebar: var(--l-bg-titlebar);
  --theme-bg-card: var(--l-bg-card);
  --theme-bg-input: var(--l-bg-input);
  --theme-bg-button-secondary: var(--l-bg-button-secondary);
  --theme-bg-hover: var(--l-bg-hover);
  --theme-bg-active: var(--l-bg-active);

  --theme-text-primary: var(--l-text-primary);
  --theme-text-secondary: var(--l-text-secondary);
  --theme-text-muted: var(--l-text-muted);
  --theme-text-disabled: var(--l-text-disabled);
  --theme-text-input: var(--l-text-input);

  --theme-border-primary: var(--l-border-primary);
  --theme-border-secondary: var(--l-border-secondary);
  --theme-border-input: var(--l-border-input);
  --theme-border-divider: var(--l-border-divider);

  --theme-shadow-color-rgb: var(--l-shadow-color-rgb);
  --theme-shadow-opacity-light: var(--l-shadow-opacity-light);
  --theme-shadow-opacity-medium: var(--l-shadow-opacity-medium);
  --theme-shadow-opacity-strong: var(--l-shadow-opacity-strong);
  --theme-shadow-popover: var(--l-shadow-popover);

  --theme-scrollbar-thumb-bg: var(--l-scrollbar-thumb-bg);
  --theme-scrollbar-thumb-hover-bg: var(--l-scrollbar-thumb-hover-bg);
  --theme-scrollbar-track-bg: var(--l-scrollbar-track-bg);
  
  --theme-button-danger-bg: var(--l-button-danger-bg);
  --theme-button-danger-bg-hover: var(--l-button-danger-bg-hover);
  --theme-button-archive-bg: var(--l-button-archive-bg);
  --theme-button-archive-bg-hover: var(--l-button-archive-bg-hover);

  --theme-link-color: var(--l-link-color);
  --theme-link-hover-color: var(--l-link-hover-color);

  /* --- Calendar Specific (New) --- */
  --l-calendar-selected-day-bg: #5FB0FF;
  --l-calendar-selected-day-text: #003366; /* New - Deep blue for contrast on light blue bg */

  --theme-accent-primary: #0A7AFF;
  --theme-accent-primary-hover: #005FCC;
  --theme-accent-primary-rgb: 10, 122, 255;
  --theme-accent-secondary: #285EFF;
  --theme-accent-secondary-hover: #1E4AD1;
  --theme-accent-warning: #FFA500;
  --theme-accent-warning-hover: #E59400;
  
  --theme-border-input: var(--l-border-input);

  --theme-bg-app-wrapper: var(--l-bg-app-wrapper);
}

/* Global focus visible style for better accessibility */
*:focus-visible {
  outline: 2px solid var(--focus-outline-color); 
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--focus-shadow-color-rgb), 0.2); 
}

/* Remove default outline for elements that will have custom focus styles */
input:focus, button:focus, select:focus, textarea:focus {
  outline: none;
}

.settings-section {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
}

.settings-header {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.settings-option {
  margin-bottom: 12px;
}

.settings-description {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 5px;
}

.migrate-button {
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.migrate-button:hover:not(:disabled) {
  background-color: var(--accent-hover-color);
}

.migrate-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  opacity: 0.7;
}

.migration-success {
  color: #4caf50;
  margin-top: 8px;
  font-size: 13px;
}

.migration-error {
  color: #f44336;
  margin-top: 8px;
  font-size: 13px;
}
</style> 